<template>
  <el-dialog
    :title="form.treeTitle"
    :fullscreen="dialogFullscree"
    :visible.sync="dialogVisible"
    width="40%"
    class="showDialogClass"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <el-container
      style="height: 250px; border: 1px solid #eee; padding-right: 20px"
    >
      <el-container width="310px">
        <el-form
          ref="form"
          :model="form"
          label-width="190px"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item :label="form.treeLabel">
                <el-input
                  :disabled="false"
                  v-model="form.name"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="排序">
                <el-input-number
                  v-model.number="form.sort"
                  :min="1"
                  :max="100"
                  label="只能是数字"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item>
                <el-button
                  type="primary"
                  @click="onSubmit"
                >
                  {{ buttonText }}
                </el-button>
                <el-button @click="handleClose">
                  取消
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-container>
    </el-container>
  </el-dialog>
</template>

  <script>
  import { save, update } from "@/api/knowledge/diretory";
  import store from "@/store";

  export default {
    name: `addTree`,
    components: {},
    mounted () {},
    computed: {
      scrollerHeight: function () {
        return `${window.innerHeight - 150}px`;
      },
    },
    props: {
      row: {
        type: Object,
        default: () => {},
      },
      id: {
        type: Number,
        default: 0,
      },
    },
    data () {
      return {
        buttonText: `保存`,
        form: {
          treeLabel: ``,
          treeTitle: ``,
          id: ``,
          code: ``,
          name: ``,
          parentCode: ``,
          type: ``,
          level: ``,
          sort: 0,
          state: ``,
        },
        heightY: `${window.innerHeight - 260}px`,
        dialogFullscree: false,
        dialogVisible: false,
        fileBussinessTypeCode: `111`,
      };
    },
    methods: {
      init (id, state) {
        this.dialogVisible = true;
        // 添加下级操作
        if (state === `add` && id != null) {
          this.form.id = id;
          this.form.state = `add`;
          this.form.treeTitle = `新增下级目录`;
          this.form.treeLabel = `新增目录名称`;
          this.dialogVisible = true;
        }
        else {
          //修改操作，回显数据
          this.form.id = id;
          this.form.state = `upd`;
          this.form.treeTitle = `修改目录信息`;
          this.form.treeLabel = `目录名称`;
        }
      },
      onSubmit () {
        if (this.form.name == `` || this.form.name == null) {
          this.$message({
            message: `请输入目录名称！`,
            type: `error`,
          })
          return false;
        }
        const params = {
          'userId': store.getters.user_id.toString(),
          'token': store.getters.token.toString(),
          "data": {
            fileBussinessTypeCode: this.fileBussinessTypeCode,
            fileDiretoryName: this.form.name,
            diretoryParentId: this.$refs.addTree.init(this.row.id, `add`),
          },
        }
        if (this.form.state === `add`) {
          save(params).then((data) => {
            if (data.result === true) {
              this.$message({
                type: `success`,
                message: `操作成功`,
              })
              this.dialogVisible = false;
              this.init();
              location.reload()
            }
            else {
              this.$message({
                type: `warning`,
                message: `操作失败`,
              })
            }
          })
        }
        else if (this.form.state ===`upd`) {
          const param = {
            'userId': store.getters.user_id.toString(),
            'token': store.getters.token.toString(),
            "data": {
              fileDiretoryId: this.$refs.addTree.init(this.row.id, `add`),
              fileBussinessTypeCode: this.fileBussinessTypeCode,
              diretoryParentId: this.$refs.addTree.init(this.row.pid, `upd`),
              fileDiretoryName: this.form.name,
              diretoryLevel: 3,
            },
          }
          update(param).then((data) => {
            if (data.result === true) {
              this.$message({
                type: `success`,
                message: `修改成功`,
              })
              this.dialogVisible = false;
              this.init();
              location.reload()
            }
            else {
              this.$message({
                type: `warning`,
                message: `修改失败`,
              })
            }
          })
        }
      },
      cancel () {
        this.dialogVisible = false;
        this.form = {
          id: ``,
          code: ``,
          name: ``,
          parentCode: ``,
          type: ``,
          level: ``,
          sort: 0,
          treeTitle: ``,
          treeLabel: ``,
          state: ``,
        };
      },
      handleClose () {
        this.cancel();
      },
    },
  };
</script>

  <style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
